<template>
  <div>
    <form>
      <div class="input-control input-user">
        <input v-model="telephone" type="text" placeholder="请输入手机号">
      </div>
      <div class="input-control register-pass">
        <input v-model="password" type="password" placeholder="请输入验证码">
        <span style="cursor: pointer;">获取短信验证码</span>
      </div>
      <div class="input-control login-fun">
        <router-link  style="float: left; color: #77839c;" tag="span" :to="{name: 'login'}">密码登录(手机号/邮箱)</router-link>
        <span style="float: right; color: #1a1a1a;">接受语音验证码</span>
      </div>
      <div class="input-control input-loginBtn">
        <el-button type="primary" @click="loginByPhone">登录</el-button>
      </div>
      <div class="input-control login-type">
        <span @click="loginByQrCode">二维码登录</span><em> · </em>
        <span @click="loginByglobalPhone">海外手机登录</span><em> · </em>
        <span @click="loginBySocialUser">社交账号登陆</span>
      </div>
    </form>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
export default {
  name: "phone-login",
  data () {
    return {
      telephone: '',
      password: ''
    }
  },
  computed: {
    ...mapGetters(['userToken'])
  },
  methods: {
    loginByPhone () {
      this._login({telephone: this.telephone, password: this.password})
        .then((res) => {
          console.log(res)
          this.doGetUserInfo()
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    doGetUserInfo () {
      this._getUserInfo({token: this.userToken})
        .then(() => {
          this.$router.push({name: '/'})
        })
        .catch((err) => {
          return Promise.reject(err)
        })
    },
    loginBySocialUser () {
      this.$router.push({name: 'sociallogin'})
    },
    loginByglobalPhone () {
      this.$router.push({name: 'phonelogin'})
    },
    loginByQrCode () {
      this.$router.push({name: 'qrcodelogin'})
    },
    ...mapActions(['_login', '_getUserInfo'])
  }
}
</script>

<style scoped lang="less">
  .login-type{
    text-align: center;
    font-size: 14px;
    color: #808080;
    span{
      cursor: pointer;
    }
  }
  .login-fun{
    span{
      cursor: pointer;
    }
  }
  .register-pass{
    position: relative;
    span{
      text-align: right;
      display: inline-block;
      right: 0px;
      top: 0px;
      position: absolute;
      width: 40%;
      height: 36px;
      line-height: 36px;
      color: #77839c;
    }
    a{
      cursor: pointer;
    }
  }
</style>
